<!DOCTYPE HTML>
<html>

<head>

    <meta charset="utf-8">
    <title>笔记摘选-HTML篇</title>
    <link rel="shortcut icon" href="../../res/logo_main.png" />
    <link href="../public.css" type="text/css" rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            },
            corePlugins: {
                preflight: false,
            }
        }
    </script>
    <link href="md_style.css" type="text/css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
</head>

<body>
    <!-- 通用导航栏 -->
    <nav id="main-nav">
        <!-- logo与标题部分 -->
        <div class="icon-title">
            <a href="../main_page/index.html"><img src="../../res/logo_main.png" height="35px" /></a>
            <a href="../main_page/index.html">
                <h1>个人学习成果展示</h1>
            </a>
        </div>

        <!-- 页面导航部分 -->
        <div class="nav-links">
            <div class="nav-link">
                <a href="../product_show_page/index.html">
                    <img src="../../res/product_icon.png" width="20px" />
                    <span>作品展示</span>
                </a>
                <div class="drop-menu">
                    <a href="../product_show_page/wpg_show.html">Windows进程守护工具</a>
                    <a href="../product_show_page/tomato_cube_show.html">《番茄魔方》时间管理工具</a>
                    <a href="../product_show_page/personal_blog_show.html">个人博客网站</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../notes_extract_page/index.html">
                    <img src="../../res/note_icon.png" width="20px" />
                    <span>笔记摘选</span>
                </a>
                <div class="drop-menu">
                    <a href="../notes_extract_page/html_note_page.html">HTML篇</a>
                    <a href="../notes_extract_page/css_note_page.html">CSS篇</a>
                    <a
                        href="../notes_extract_page/js_note_page.html">JavaScript篇&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../info_links_page/index.html">
                    <img src="../../res/infomation_icon.png" width="20px" />
                    <span>资料链接</span>
                </a>
                <div class="drop-menu">
                    <a href="../info_links_page/c_and_cpp_info_page.html">C/C++</a>
                    <a
                        href="../info_links_page/python_info_page.html">Python&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../info_links_page/web_info_page.html">Web</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../js_lab_page/index.html">
                    <img src="../../res/lab_lcon.png" width="20px" />
                    <span>JS实验室</span>
                </a>
                <div class="drop-menu">
                    <a
                        href="../js_lab_page/sort_demo_page.html">排序演示&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../js_lab_page/shape_draw_page.html">图形绘制</a>
                    <a href="../js_lab_page/address_list_page.html">通讯录演示</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../CV_show_page/index.html">
                    <img src="../../res/cv_icon.png" width="20px" />
                    <span>简历查看</span>
                </a>
                <div class="drop-menu">
                    <a
                        href="../CV_show_page/online_view_page.html">在线查看&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../CV_show_page/index.html">简历下载</a>
                    <a href="../CV_show_page/index.html">联系方式</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../admin_entrance_page/index.html" target="_blank">
                    <img src="../../res/admin_icon.png" width="20px" />
                    <span>管理员入口</span>
                </a>
            </div>
        </div>
        <!-- 时间显示部分 -->
        <div class="time-show">
            <p id="current-date"></p>
            <p id="current-time"></p>
        </div>
        <!-- 注册＆登录部分 -->
        <div class="register-login">
            <button id="registerBtn">注册</button>
            <span>丨</span>
            <button id="loginBtn">登录</button>
        </div>
    </nav>

    <!-- 主页主体部分 -->
    <section class="main-body">
        <!--Banner图 -->
        <div class="banner-box">
            <img src="../../res/banner (12).png" alt="banner图">
            <h1 class="slogan" id="typewriter" style="min-width: 900px;">Web学习笔记（一）：HTML篇</h1>
        </div>
        <div class="md-block">
            <hr>
            <blockquote>
                <p>声明：本篇笔记部分摘自<a href="https://www.wenjingketang.com/bookinfo?book_id=9310">《Web前端技术 - 航空工业出版社》</a>，遵循<a
                        href="https://creativecommons.org/licenses/by/4.0/legalcode.zh-hans">CC BY 4.0协议</a>。<br>
                    存在由AI生成的小部分内容，仅供参考，请仔细甄别可能存在的错误。<br />
                    本篇笔记转载自我的个人博客，<a
                        href="https://blog.morely.top/2025/04/17/Web%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E4%B8%80%EF%BC%89%EF%BC%9AHTML%E7%AF%87/"
                        target=“_blank”>点击跳转到原文地址</a>。</p>
            </blockquote>
            <hr>
            <h1 id="html">一、HTML概述</h1>
            <p><code>HTML (HyperText Markup Language，超文本标记语言)</code>是用于创建和设计网页的标准标记语言。它通过一系列 <strong>标签(Tags)</strong>
                定义网页的结构和内容，浏览器会解析这些标签并渲染成用户看到的页面。</p>
            <h1 id="html_1">二、常用HTML标签</h1>
            <h2 id="1">1.基本结构</h2>
            <pre class="codehilite"><code class="language-html">&lt;!DOCTYPE html&gt;    &lt;!-- 文档类型声明 --&gt;
&lt;html&gt;     &lt;!-- HTML部分 --&gt;
    &lt;head&gt;    &lt;!-- 网页头部 --&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;    &lt;!-- 元数据，声明字符集 --&gt;
        &lt;title&gt; &lt;/title&gt;    &lt;!-- 网页标题 --&gt;
        &lt;link rel=&quot;shortcut icon&quot; href=&quot;img/favicon.png&quot;&gt;    &lt;!-- 链接网页图标 --&gt;
    &lt;/head&gt;
    &lt;body&gt;     &lt;!-- 网页主体部分 --&gt;
        &lt;!-- 网页可见部分 --&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>

            <p>使用规范专用、结构清晰的标签，&#8203;可以方便搜索引擎整理网页内容，&#8203;有利于信息检索。</p>
            <h2 id="2">2.常用标签</h2>
            <h3 id="1_1">① 文档标签</h3>
            <ul>
                <li><code>&lt;!DOCTYPE&gt;</code>：文档声明，<code>&lt;!DOCTYPE html&gt;</code>表明此文档使用H5标准。</li>
                <li><code>&lt;html&gt;</code>：又称根标签，&gt;表明这是一个H5文档。</li>
                <li><code>&lt;head&gt;</code>：标记文档头部，存储网页基本信息。<ul>
                        <li><code>&lt;meta&gt;</code>：元信息标签，用于设置描述和关键词，以便搜索引擎检索。<ul>
                                <li>字符集：<code>&lt;meta charset="utf-8"&gt;</code> 定义网页使用utf-8字符集。</li>
                                <li>网页视口：<code>&lt;meta name="viewport"&gt;</code> 设置视口高度、缩放比等，常用于在响应式设计中使网页适配移动端。</li>
                            </ul>
                        </li>
                        <li><code>&lt;title&gt;</code>：标记网页标题，显示在浏览器标签上。</li>
                        <li><code>&lt;link&gt;</code>：链接外部资源，规定了当前文档与某个外部资源的关系。<ul>
                                <li>链接图标：<code>&lt;link rel="shortcut icon" href="img/favicon.png"&gt;</code></li>
                                <li>链接CSS样式：<code>&lt;link rel="stylesheet" type="text/css" href="index.css"&gt;</code>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><code>&lt;body&gt;</code>：标记文档主体，用于设置展示给用户的内容。</li>
            </ul>
            <h3 id="2_1">② 结构标签</h3>
            <ul>
                <li><code>&lt;header&gt;</code>：页眉标签，通常包含网站Logo、网页主导航和搜索框等。</li>
                <li><code>&lt;nav&gt;</code>：导航标签，标记页面导航的链接组，如主菜单、侧边栏导航或者页内导航等。</li>
                <li><code>&lt;article&gt;</code>：文章块标签，用于标记一块完整独立的内容，如文章、博客条目，用户评论。</li>
                <li><code>&lt;section&gt;</code>：区块标签，用于标记文档中的节，从而对内容进行分区，如章节、页眉页脚。</li>
                <li><code>&lt;aside&gt;</code>：附栏标签，用于标记引用内容、广告等与内容无关的部分。</li>
                <li><code>&lt;footer&gt;</code>：页脚标签，用于标记文档或节的页脚，如友链、版权等信息。</li>
                <li><code>&lt;div&gt;</code>：块级无语义容器，用于模块化布局。</li>
                <li><code>&lt;span&gt;</code>：行内无语义标签，常用标记于文章标题下的作者、时间、地点等附属信息。</li>
            </ul>
            <p>★ 使用示例</p>
            <pre class="codehilite"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;简单网页示例&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- 页眉部分 --&gt;
    &lt;header&gt;
        &lt;h1&gt;我的网站&lt;/h1&gt;
        &lt;nav&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;首页&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;关于我们&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;联系我们&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
    &lt;/header&gt;

    &lt;!-- 主体内容 --&gt;
    &lt;main&gt;
        &lt;!-- 文章部分 --&gt;
        &lt;article&gt;
            &lt;h2&gt;欢迎来到我的博客&lt;/h2&gt;
            &lt;section&gt;
                &lt;h3&gt;第一章：HTML 简介&lt;/h3&gt;
                &lt;p&gt;HTML 是用于构建网页的标准标记语言。&lt;/p&gt;
            &lt;/section&gt;
            &lt;section&gt;
                &lt;h3&gt;第二章：CSS 简介&lt;/h3&gt;
                &lt;p&gt;CSS 用于控制网页的样式和布局。&lt;/p&gt;
            &lt;/section&gt;
            &lt;footer&gt;
                &lt;p&gt;发布时间：&lt;span&gt;2023年10月10日&lt;/span&gt; | 作者：&lt;span&gt;张三&lt;/span&gt;&lt;/p&gt;
            &lt;/footer&gt;
        &lt;/article&gt;

        &lt;!-- 附栏部分 --&gt;
        &lt;aside&gt;
            &lt;h3&gt;相关链接&lt;/h3&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;HTML 教程&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;CSS 教程&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/aside&gt;
    &lt;/main&gt;

    &lt;!-- 页脚部分 --&gt;
    &lt;footer&gt;
        &lt;p&gt;&amp;copy; 2023 我的网站. 版权所有.&lt;/p&gt;
        &lt;nav&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;隐私政策&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href=&quot;#&quot;&gt;使用条款&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/nav&gt;
    &lt;/footer&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

            <h3 id="3">③ 文本标签</h3>
            <ul>
                <li><code>&lt;h1&gt; ~ &lt;h6&gt;</code>：1级标题 ~ 6级标题，默认使文字加粗，字号依次减小。</li>
                <li><code>&lt;p&gt;</code> (paragraph)：段落标签，用于标记段落文本，默认使用系统的字体字号。</li>
                <li><code>&lt;strong&gt;</code>：强调标签，呈现<code>粗体</code>效果，语气较重。<ul>
                        <li><code>&lt;b&gt;</code>：只有加粗效果，无强调作用。</li>
                    </ul>
                </li>
                <li><code>&lt;em&gt;</code> (emphasis)：强调标签，呈现<em>斜体</em>效果，语气较轻。<ul>
                        <li><code>&lt;i&gt;</code>：只有斜体效果，无强调作用。</li>
                    </ul>
                </li>
                <li><code>&lt;sup&gt;</code>：标记上标，如$x^{2}、Register^{®}$。</li>
                <li><code>&lt;sub&gt;</code>：标记下标，如$x_{1}、CaCO_{3}$。</li>
                <li><code>&lt;ins&gt;</code> (insert)：表示插入的文本，默认添加下划线样式。</li>
                <li><code>&lt;del&gt;</code> (delete)：表示删除的文本，默认添加删除线样式。</li>
                <li><code>&lt;abbr&gt;</code> (abbreviation)：标记简称或缩写词，鼠标悬停时使用气泡显示全称。<ul>
                        <li>如：<abbr text="Hypertext markup language">HTML</abbr>。</li>
                    </ul>
                </li>
                <li><code>&lt;br /&gt;</code>：实现文本换行，不建议大量使用。</li>
                <li><code>&lt;hr /&gt;</code>：标记水平线。<ul>
                        <li>align属性：设置对齐方式，<strong>center 居中</strong> | left 左对齐 | right 右对齐</li>
                        <li>size属性：设置粗细，以像素(px)为单位，<strong>默认2px</strong>。</li>
                        <li>width属性：设置宽度，单位为px或%，<strong>默认100%</strong>。</li>
                        <li>color属性：设置颜色，可用颜色名、#RGB十六进制、(r, g, b)设置。</li>
                    </ul>
                </li>
                <li><code>&lt;dfn&gt;</code>：用于标记专用术语，默认添加斜体效果。</li>
                <li><code>&lt;pre&gt;</code>：表示预定义格式文本，即保利原有的空格和换行。</li>
                <li><code>&lt;code&gt;</code>：用于标记代码或文件名，一般包裹在<code>&lt;pre&gt;</code>标签中以保留原有的格式。</li>
            </ul>
            <h3 id="4">④ 特殊字符转义</h3>
            <table>
                <thead>
                    <tr>
                        <th style="text-align: center;">字符</th>
                        <th style="text-align: center;">含义</th>
                        <th style="text-align: center;">代码</th>
                        <th style="text-align: center;">解释</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: center;"></td>
                        <td style="text-align: center;">空格</td>
                        <td style="text-align: center;"><code>&amp;nbsp;</code></td>
                        <td style="text-align: center;">Non-Breaking Space</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">&lt;</td>
                        <td style="text-align: center;">小于号</td>
                        <td style="text-align: center;"><code>&amp;lt;</code></td>
                        <td style="text-align: center;">less than</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">&gt;</td>
                        <td style="text-align: center;">大于号</td>
                        <td style="text-align: center;"><code>&amp;gt;</code></td>
                        <td style="text-align: center;">great than</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">&amp;</td>
                        <td style="text-align: center;">逻辑与符号</td>
                        <td style="text-align: center;"><code>&amp;amp;</code></td>
                        <td style="text-align: center;">ampersand</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">￥</td>
                        <td style="text-align: center;">人民币符号</td>
                        <td style="text-align: center;"><code>&amp;yen;</code></td>
                        <td style="text-align: center;">类似拼音</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">©</td>
                        <td style="text-align: center;">版权符号</td>
                        <td style="text-align: center;"><code>&amp;copy;</code></td>
                        <td style="text-align: center;">copyright</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">®</td>
                        <td style="text-align: center;">注册商标符号</td>
                        <td style="text-align: center;"><code>&amp;reg;</code></td>
                        <td style="text-align: center;">register</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">°</td>
                        <td style="text-align: center;">度符号</td>
                        <td style="text-align: center;"><code>&amp;deg;</code></td>
                        <td style="text-align: center;">degree</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">±</td>
                        <td style="text-align: center;">正负号</td>
                        <td style="text-align: center;"><code>&amp;plusmn;</code></td>
                        <td style="text-align: center;">plus-minus</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">×</td>
                        <td style="text-align: center;">乘号</td>
                        <td style="text-align: center;"><code>&amp;times;</code></td>
                        <td style="text-align: center;"></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">÷</td>
                        <td style="text-align: center;">除号</td>
                        <td style="text-align: center;"><code>&amp;divide;</code></td>
                        <td style="text-align: center;"></td>
                    </tr>
                </tbody>
            </table>
            <h3 id="5">⑤ 多媒体</h3>
            <ul>
                <li>
                    <p>★ 路径表示法</p>
                    <ul>
                        <li>图片在同级目录下：<code>example.png</code></li>
                        <li>图片在下级目录下：<code>dic/example.png</code></li>
                        <li>图片在上级目录下：<code>../dic/example.png</code></li>
                    </ul>
                </li>
                <li>
                    <p>图片标签：<code>&lt;img src="路径" alt="提示文本" /&gt;</code></p>
                    <ul>
                        <li>src支持链接 JPEG 、 GIF 和 <code>PNG</code> 三种格式的图片</li>
                    </ul>
                </li>
                <li>音频标签：<code>&lt;audio src="路径" controls="controls"&gt;提示文本&lt;/audio&gt;</code>
                    <ul>
                        <li>controls属性：显示音频控件</li>
                    </ul>
                </li>
                <li>视频标签：<code>&lt;video src="路径" controls="controls"&gt;提示文本&lt;/video&gt;</code>
                    <ul>
                        <li>controls属性：显示视频控件</li>
                    </ul>
                </li>
                <li>流标签：<code>&lt;figure&gt;&lt;/figure&gt;</code>
                    <ul>
                        <li>表示页面中的一块独立的内容，表现为具有左右缩进的内容快。</li>
                        <li><code>&lt;figcaption&gt;</code>：嵌套在&lt;figure中标记流的标题，可以省略。</li>
                    </ul>
                </li>
            </ul>
            <p>★ 使用示例</p>
            <pre class="codehilite"><code class="language-html">&lt;figure&gt;
    &lt;figcaption&gt;流标题&lt;/figcaption&gt;
    &lt;img src=&quot;img/p1.jpg&quot; alt=&quot;示例图片&quot; /&gt;
    &lt;p&gt;流内容&lt;/p&gt;
&lt;/figure&gt;
</code></pre>

            <h3 id="6">⑥ 列表</h3>
            <ul>
                <li>无序列表：<ul></ul>
                    <ul>
                        <li>各级列表项前，默认分别显示实心圆、空心圆、实心方块图标。</li>
                        <li>也可通过<code>type= "disc" "circle" "square"</code> 强制指定序号样式。</li>
                    </ul>
                </li>
                <li>有序列表：<code>&lt;ol&gt;&lt;/ol&gt;</code>，具有以下属性：<ul>
                        <li><code>reversed="reversed"</code>：降序排列(仅颠倒编号，各列表项内容不颠倒)。</li>
                        <li><code>start="1"</code>：指定序号的起始值。</li>
                        <li><code>type="1" "A" "a" "I" "i"</code>：指定序号的样式。</li>
                    </ul>
                </li>
                <li>自定义列表： <code>&lt;dl&gt;&lt;/dl&gt;</code>
                    <ul>
                        <li>使用 <code>&lt;dt&gt;&lt;/dt&gt;</code> 标记列表标题</li>
                        <li>使用 <code>&lt;dd&gt;&lt;/dd&gt;</code> 标记列表内容</li>
                    </ul>
                </li>
                <li>列表项：<code>&lt;li&gt;&lt;/li&gt;</code>，与<code>&lt;ol&gt;</code>相似，具有以下属性：<ul>
                        <li><code>value="1"</code>：指定当前项的序号，并使之后的列表项重新编号。</li>
                        <li><code>type="1" "A" "a" "I" "i"</code>：指定序号的样式。</li>
                    </ul>
                </li>
            </ul>
            <p>★ 使用示例</p>
            <pre class="codehilite"><code class="language-html">&lt;ul type=&quot;disc&quot;&gt;
    &lt;li&gt;无序列表第一项&lt;/li&gt;
    &lt;li&gt;无序列表第二项&lt;/li&gt;
    &lt;ol reversed=&quot;reversed&quot;&gt;
        &lt;li value=&quot;1&quot; type=&quot;A&quot;&gt;有序列表第一项&lt;/li&gt;
        &lt;li&gt;有序列表第二项&lt;/li&gt;
    &lt;/ol&gt;
&lt;/ul&gt;
&lt;dl&gt;   &lt;!-- 自定义列表中可以有多个标题，列表项没有项目符号，也不强调次序 --&gt;
    &lt;dt&gt; 自定义列表标题&lt;/dt&gt;
    &lt;dd&gt;自定义列表第一项&lt;/dd&gt;
    &lt;dd&gt;自定义列表第二项&lt;/dd&gt;
    &lt;dt&gt;自定义列表标题&lt;/dt&gt;
    &lt;dd&gt;自定义列表项目&lt;dd&gt;
&lt;/dl&gt;
</code></pre>

            <h3 id="7">⑦ 超链接</h3>
            <ul>
                <li><code>&lt;a href="目标地址"&gt; 载体 &lt;/a&gt;</code>
                    <ul>
                        <li>href属性：必须设置，若暂时未确定地址，用href="#"将链接置空。</li>
                        <li>target属性：<strong>self 当前窗口打开</strong> | blank 新窗口打开</li>
                        <li>download属性：指定资源的文件名，并且强制浏览器执行下载操作(仅Chrome和FIreFox支持)。</li>
                    </ul>
                </li>
                <li>锚点链接：设置某个标签的id属性，将链接的href属性设置为<code>href="#id名称"</code>，可以创建一个锚点。用户点击链接时会自动跳转到指定id所在的标签处。</li>
                <li>电子邮件链接：<code>href = "mainto:电子邮件地址?subject=邮件主题"</code></li>
                <li>图像热点链接：在一张图片上根据坐标分别设置不同区域的超链接。步骤如下：<ul>
                        <li>在图片标签<code>&lt;img /&gt;</code>下添加一个<code>&lt;map&gt;</code>标签，其name属性为图片的id，表示添加图像热点链接的作用区域
                        </li>
                        <li>在<code>&lt;map&gt;</code>标签中添加几个<area>标签，使用下列属性设置热点链接：<ul>
                                <li>shape：circle 圆形 | rect 矩形 | poly 多边形</li>
                                <li>coords：关键点的坐标，参数如下：<ul>
                                        <li>circle形状：coords = "圆心x, 圆心y，半径"</li>
                                        <li>rect形状：coords = "左上顶点x, 左上顶点y, 右下顶点x, 右下顶点y"</li>
                                        <li>poly形状：coords = "顶点1x, 顶点1y, 顶点2x, 顶点2y, …"</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
            <p>★ 使用示例</p>
            <pre class="codehilite"><code class="language-html">&lt;a href=&quot;img/p1.png&quot; target=&quot;_blank&quot; id=pic_dog&gt;  &lt;!-- 简单的超链接示例 --&gt;
    &lt;img src=&quot;img/p1.png&quot; alt=&quot;小狗&quot; /&gt;
    &lt;p&gt;点击预览&lt;/p&gt;
&lt;/a&gt;

&lt;a href=&quot;#pic_dog&quot;&gt;  &lt;!-- 锚点示例：点击跳转到小狗图片 --&gt;
    &lt;p&gt;查看图片&lt;/p&gt;
&lt;/a&gt;

&lt;img src=&quot;img/main.png&quot; alt=&quot;动物大全&quot;  usermap=&quot;#map&quot;/&gt;  &lt;!-- 图像热点链接 --&gt;
&lt;map name=&quot;map&quot;&gt;  &lt;!-- 属性值应与usermap的值相同 --&gt;
    &lt;area shape=&quot;circle&quot; coords=&quot;88, 77, 63&quot; href=&quot;img/dogs.png&quot; alt=&quot;小狗&quot;&gt;
    &lt;area shape=&quot;rect&quot; coords=&quot;26, 190, 151, 357&quot; href=&quot;img/cats.png&quot; alt=&quot;小猫&quot;&gt;
&lt;/map&gt;
</code></pre>

            <h3 id="8">⑧ 表格</h3>
            <ul>
                <li>基本结构<ul>
                        <li><code>&lt;table&gt;</code>：标记表格。</li>
                        <li><code>&lt;caption&gt;</code>：标记表格的标题。</li>
                        <li><code>&lt;tr&gt;</code>：标记表格中的一行。</li>
                        <li><code>&lt;th&gt;</code>：包含在<code>&lt;tr&gt;</code>中，标记表头内容，默认加粗居中。</li>
                        <li><code>&lt;td&gt;</code>：包含在<code>&lt;tr&gt;</code>中，标记普通内容，默认不加粗左对齐。</li>
                    </ul>
                </li>
                <li>表格分组<ul>
                        <li>按行分组：<ul>
                                <li><code>&lt;thead&gt;</code>：标记表头部分(<code>&lt;th&gt;</code>标记的是表头的一格)。</li>
                                <li><code>&lt;tbody&gt;</code>：标记表体部分。</li>
                                <li><code>&lt;tfoot&gt;</code>：标记表尾部分。</li>
                            </ul>
                        </li>
                        <li>按列分组：<ul>
                                <li><code>&lt;col&gt;</code>：包含在<code>&lt;table&gt;</code>中，通过 <code>span属性</code>
                                    设置每组的列数。</li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>常用属性<ul>
                        <li>整体边框<ul>
                                <li>设置<code>&lt;table&gt;</code>的 <code>border属性</code>，单位为px。</li>
                            </ul>
                        </li>
                        <li>单元格的内外边距<ul>
                                <li>内边距(内容 - 边框)：设置<code>&lt;table&gt;</code>的 <code>cellpadding属性</code>，单位为px。</li>
                                <li>外边距(边框 - 边框)：设置<code>&lt;table&gt;</code>的 <code>cellspacing属性</code>，单位为px。</li>
                                <li>图示：<br>
                                    <img alt="" src="imgs/20250514174921790.png">
                                    <ul>
                                        <li>这两个属性不常在HTML中使用(已过时),而是使用CSS中的<code>border-spacing</code>属性。</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>表格内外边距（外遵框架frame，内守规矩rulles）<ul>
                                <li>表格内边框：设置<code>&lt;table&gt;</code>的 <code>rules属性</code>(已废弃) ，取值如下：<ul>
                                        <li>none：不显示内边框</li>
                                        <li>all：显示所有边框</li>
                                        <li>groups：只显示分组的边框</li>
                                        <li>rows：显示行之间的边框</li>
                                        <li>cols：显示列之间的边框</li>
                                    </ul>
                                </li>
                                <li>表格外边框：设置<code>&lt;table&gt;</code>的 <code>frame属性</code>(已废弃) ，取值如下：<ul>
                                        <li>void：不显示外边框</li>
                                        <li>box、boder：显示所有外边框</li>
                                        <li>above：显示上边框</li>
                                        <li>below：显示下边框</li>
                                        <li>lhs：显示左外边框</li>
                                        <li>rhs：显示有外边框</li>
                                        <li>hsides：(horizon sides)显示上下边框</li>
                                        <li>vsides：(vertical sides)显示左右边框</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>单元格跨行、跨列<ul>
                                <li>跨行：设置<code>&lt;th&gt;</code>或<code>&lt;td&gt;</code>的rowspan属性，值为跨行数。</li>
                                <li>跨列：设置<code>&lt;th&gt;</code>或<code>&lt;td&gt;</code>的colspan属性，值为跨列数。</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
            <p>★ 使用示例</p>
            <pre class="codehilite"><code class="language-html">&lt;table border=&quot;1&quot; rules=&quot;all&quot;&gt;      &lt;!-- 以1px显示所有外边框 --&gt;
    &lt;caption&gt;表格标题&lt;/caption&gt;
    &lt;col class=&quot;c1&quot; span=&quot;1&quot; /&gt;     &lt;!-- 垂直分组：第一组占一列 --&gt;                
    &lt;col class=&quot;c2&quot; span=&quot;3&quot; /&gt;     &lt;!-- 垂直分组：第二组占三列 --&gt;
    &lt;!-- 水平分组：表头部分 --&gt;
    &lt;thead&gt;
        &lt;tr&gt;&lt;th&gt;表头第一格&lt;/th&gt;&lt;th&gt;表头第二格&lt;/th&gt;&lt;th&gt;表头第三格&lt;/th&gt;&lt;th&gt;表头第四格&lt;/th&gt;&lt;/tr&gt;
    &lt;/thead&gt;
    &lt;!-- 水平分组：表体部分 --&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;!--跨行内容--&gt;
            &lt;th rowspan=&quot;2&quot;&gt;内容(1,1)&lt;br/&gt;(占两行)&lt;/th&gt;
            &lt;td&gt;内容(1,2)&lt;/td&gt;&lt;td&gt;内容(1,3)&lt;/td&gt;&lt;td&gt;内容(1,4)&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;内容(2,2)&lt;/td&gt;&lt;td&gt;内容(2,3)&lt;/td&gt;&lt;td&gt;内容(2,4)&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;th&gt;内容(3,1)&lt;/th&gt;
            &lt;td&gt;内容(3,2)&lt;/td&gt;&lt;td&gt;内容(3,3)&lt;/td&gt;&lt;td&gt;内容(3,4)&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;!-- 水平分组：表尾部分 --&gt;
    &lt;tfoot&gt;
        &lt;tr&gt;
            &lt;th&gt;表尾第一格&lt;/th&gt;
            &lt;!--跨列内容--&gt;
            &lt;th colspan=&quot;3&quot;&gt;表尾第二格(占三列)&lt;/th&gt;&lt;/tr&gt;
    &lt;/tfoot&gt;
&lt;/table&gt;
</code></pre>

            <p>★ 表格效果：</p>
            <table border="1" rules="all">      <!-- 以1px显示所有外边框 -->
                <caption>表格标题</caption>
                <col class="c1" span="1" />     <!-- 垂直分组：第一组占一列 -->                
                <col class="c2" span="3" />     <!-- 垂直分组：第二组占三列 -->
                <!-- 水平分组：表头部分 -->
                <thead>
                    <tr>
                        <th>表头第一格</th>
                        <th>表头第二格</th>
                        <th>表头第三格</th>
                        <th>表头第四格</th>
                    </tr>
                </thead>
                <!-- 水平分组：表体部分 -->
                <tbody>
                    <tr>
                        <!--跨行内容-->
                        <th rowspan="2">内容(1,1)<br />(占两行)</th>
                        <td>内容(1,2)</td>
                        <td>内容(1,3)</td>
                        <td>内容(1,4)</td>
                    </tr>
                    <tr>
                        <td>内容(2,2)</td>
                        <td>内容(2,3)</td>
                        <td>内容(2,4)</td>
                    </tr>
                    <tr>
                        <th>内容(3,1)</th>
                        <td>内容(3,2)</td>
                        <td>内容(3,3)</td>
                        <td>内容(3,4)</td>
                    </tr>
                </tbody>
                <!-- 水平分组：表尾部分 -->
                <tfoot>
                    <tr>
                        <th>表尾第一格</th>
                        <!--跨列内容-->
                        <th colspan="3">表尾第二格(占三列)</th>
                    </tr>
                </tfoot>
            </table>

            <h3 id="9">⑨ 表单</h3>
            <ul>
                <li>基本组成：表单域、表单控件、提交按钮、提示信息。<br>
                    <img alt="" src="imgs/20250514175031977.png">
                    <ul>
                        <li>表单域：网页中放置表单控件与提示信息的区域，用于采集用户输入信息并传输到服务器。<ul>
                                <li><code>&lt;form action="提交地址" method="提交方式"&gt;&lt;/form&gt;</code>（form标签不可互相嵌套。）
                                    <ul>
                                        <li>action属性：表示数据提交的地址，一般是一个URL，开发初期可使用#占位置空。</li>
                                        <li>method属性：提交表单数据的方式，默认为get，一般使用post。</li>
                                        <li>name属性：表单的名称。</li>
                                        <li>autocomplete属性：自动记录并弹出历史记录。取值： <strong>on</strong> | off</li>
                                        <li>novalidate属性：值为novalidate，若设置则不会对输入的内容进行检查。</li>
                                        <li>enctype属性：设置数据发送到服务器时的编码类型，取值：<ul>
                                                <li><strong>application/x-www-form-urlencoded</strong>：表示对所有字符编码再传输，会导致大文件传输效率降低。
                                                </li>
                                                <li>mutipart/formdata：表示传输的数据为二进制类型。</li>
                                                <li>text/plain：表示传输纯文本，不编码特殊字符，但是空格转换为加号“+”。</li>
                                            </ul>
                                        </li>
                                        <li>target属性：表示表单数据提交地址的打开方式，取值：<strong>self 当前窗口打开</strong> | blank 新窗口打开</li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li>提交按钮：用于用户确定信息填写完毕后将其传输至服务器。</li>
                        <li>提示信息：提示用户输入信息的内容和类型。</li>
                        <li>常用表单控件：提供表单功能，如文本框、按钮、单/复选框、搜索框等。<ul>
                                <li><code>&lt;input type="text" /&gt;</code>：单行文本框，用于输入简短的文本，如账号密码。</li>
                                <li><code>&lt;input type="password" /&gt;</code>：密码文本框，会隐藏输入的内容，显示黑色圆点。</li>
                                <li><code>&lt;input type="radio" /&gt;</code>：单选框，用于单项选择，如性别、年级等。</li>
                                <li><code>&lt;input type="checkbox" /&gt;</code>：复选框，用于多项选择(也可以单选)，如兴趣爱好爱好。</li>
                                <li><code>&lt;input type="button" /&gt;</code>：普通按钮，用于标记可单机的按钮，通过value属性可设置按钮内容。<ul>
                                        <li>作用同<code>&lt;button&gt;</code>标签，后者可嵌入文本、图像等内容，同时拥有更丰富的样式。</li>
                                    </ul>
                                </li>
                                <li><code>&lt;input type="submit" /&gt;</code>：提交按钮，用于提交用户输入的数据，默认内容为“提交”。</li>
                                <li><code>&lt;input type="reset" /&gt;</code>：重置按钮，用于清空表单中的数据，默认内容为“重置”。</li>
                                <li><code>&lt;input type="image" /&gt;</code>：图像形式的提交按钮，使用图像代替普通提交按钮样。</li>
                                <li><code>&lt;input type="file" /&gt;</code>：文件域，包含一个“选择文件”的按钮和表示选中文件的文本，用户单机按钮可选择文件上传。
                                </li>
                                <li><code>&lt;input type="email" /&gt;</code>：邮箱地址文本框，支持验证邮箱格式正确性，并提示错误信息。</li>
                                <li><code>&lt;input type="url" /&gt;</code>：地址文本框，支持验证URL格式正确性，并提示错误信息。</li>
                                <li><code>&lt;input type="tel" /&gt;</code>：电话号码文本框，通过pattern属性设置正则表达式限制输入格式。</li>
                                <li><code>&lt;input type="search" /&gt;</code>：搜索框，能够记录输入的字符，作为网站搜索的关键词。</li>
                                <li><code>&lt;input type="number" /&gt;</code>：数值文本框，只能输入数字，支持设置max,min,step,value属性限制输入内容的边界、间隔和默认值。
                                </li>
                                <li><code>&lt;input type="range" /&gt;</code>：数值范围滑块，将数值文本框显示为滑动条控件。</li>
                                <li><code>&lt;input type="date" /&gt;</code>：日期时间文本框，可通过设置type来控制时间的精度：date(天) | week(周)
                                    |
                                    month（月） | time(分钟)</li>
                            </ul>
                        </li>
                        <li>其他表单控件：<ul>
                                <li><code>&lt;textarea clos="列数" rows="行数" palcehoder=“提示信息”&gt;</code>：文本区域(支持输入多行文本，类似于留言板)
                                </li>
                                <li><code>&lt;select size="选项个数" mutiple="mutiple"&gt;&lt;option&gt;选项一&lt;/option&gt;&lt;option&gt;选项二&lt;/option&gt;&lt;option&gt;选项三&lt;/option&gt;&lt;/select&gt;</code>:选择框(下拉列表)
                                    <ul>
                                        <li>若为select设置mutiple属性，则选项会按多行显示，且支持按Ctrl多选</li>
                                        <li>若为option设置selected属性，默认选中此选项</li>
                                        <li>若选项较多，可使用<code>&lt;optgroup label="组名"&gt;&lt;/optgroup&gt;</code>包含多个<code>&lt;option&gt;</code>标签，进行选项分组
                                        </li>
                                    </ul>
                                </li>
                                <li>数据列表：支持用户输入关键词匹配选项，同时也支持用户直接选择列表中的选项，格式如下：</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
            <pre class="codehilite"><code class="language-HTML">&lt;input type=&quot;类型&quot; list=&quot;列表名称&quot;&gt;
&lt;datalist id=&quot;列表名称&quot;&gt;
    &lt;option label=&quot;说明内容1&quot;&gt;选项1&lt;/option&gt; &lt;!-- 说明内容不会被填入输入框 ---&gt;
    &lt;option label=&quot;说明内容2&quot;&gt;选项2&lt;/option&gt;
    ...
&lt;/datalist&gt;
</code></pre>

            <table>
                <thead>
                    <tr>
                        <th style="text-align: center;"><strong>上述代码效果说明</strong></th>
                        <th style="text-align: center;"><strong>图示</strong></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: center;">支持用户选择选项</td>
                        <td style="text-align: center;"><img alt="" src="imgs/20250514175158629.png"></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">支持用户输入匹配</td>
                        <td style="text-align: center;"><img alt="" src="imgs/20250514175305177.png"></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">说明文字不会被填入输入框</td>
                        <td style="text-align: center;"><img alt="" src="imgs/20250514175247210.png"></td>
                    </tr>
                </tbody>
            </table>
            <p>常用表单属性：</p>
            <table>
                <thead>
                    <tr>
                        <th style="text-align: center;">属性</th>
                        <th style="text-align: center;">属性值</th>
                        <th style="text-align: center;">说明</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td style="text-align: center;">name</td>
                        <td style="text-align: center;">自定义</td>
                        <td style="text-align: center;">表单控件的名称</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">value</td>
                        <td style="text-align: center;">自定义</td>
                        <td style="text-align: center;">表单控件的默认值</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">readonly</td>
                        <td style="text-align: center;">readonly</td>
                        <td style="text-align: center;">表单控件不可编辑修改</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">disabled</td>
                        <td style="text-align: center;">disabled</td>
                        <td style="text-align: center;">禁用该表单控件（显示为灰色）</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">checked</td>
                        <td style="text-align: center;">checked</td>
                        <td style="text-align: center;">该项默认选中（单选钮或复选框）</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">autocomplete</td>
                        <td style="text-align: center;">on/off</td>
                        <td style="text-align: center;">自动完成功能</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">autofocus</td>
                        <td style="text-align: center;">autofocus</td>
                        <td style="text-align: center;">自动获取焦点</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">form</td>
                        <td style="text-align: center;"><code>&lt;form&gt;</code>的id属性值</td>
                        <td style="text-align: center;">指定控件所属表单</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">placeholder</td>
                        <td style="text-align: center;">字符串</td>
                        <td style="text-align: center;">显示在输入型文本框中的输入提示</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">required</td>
                        <td style="text-align: center;">required</td>
                        <td style="text-align: center;">该表单控件不可为空</td>
                    </tr>
                    <tr>
                        <td style="text-align: center;">pattern</td>
                        <td style="text-align: center;">字符串(正则表达式)</td>
                        <td style="text-align: center;">验证输入内容的模式</td>
                    </tr>
                </tbody>
            </table>

            <ul>
                <li>提示信息：<code>&lt;label for="目标控件id"&gt;提示信息&lt;/label&gt;</code>
                    <ul>
                        <li>用于单选/复选框选择钮后的文字说明，或按钮中的文字(如：○ <strong>18岁以下</strong>)</li>
                        <li>点击提示信息也能够激活对应的控件，有利于优化用户体验</li>
                    </ul>
                </li>
                <li>表单对象分组：<code>&lt;fieldset&gt;</code>
                    <ul>
                        <li>格式：</li>
                    </ul>
                </li>
            </ul>
            <pre class="codehilite"><code class="language-HTML">    &lt;fieldset&gt;
        &lt;legend&gt;登录&lt;/legend&gt;
        &lt;p&gt;账号：&lt;input type=&quot;text&quot; /&gt;&lt;/p&gt;
        &lt;p&gt;密码：&lt;input type=&quot;password&quot; /&gt;&lt;/p&gt;
    &lt;/fieldset&gt;
</code></pre>

            <p><img alt="" src="imgs/20250514175326762.png"></p>
            <hr>
            <p>★ 常用表单标签使用示例</p>
            <pre class="codehilite"><code class="language-html">&lt;form action=&quot;#&quot; method=&quot;post&quot;&gt;
            &lt;p&gt;会员信息表&lt;/p&gt;
            &lt;fieldset&gt;
                &lt;legend&gt;基本信息&lt;/legend&gt;
                &lt;label for=&quot;name&quot;&gt;昵称：&lt;/label&gt;
                &lt;input id=&quot;name&quot; type=&quot;text&quot; /&gt;&lt;br /&gt;&lt;br /&gt;
                &lt;label for=&quot;idc&quot;&gt;头像：&lt;/label&gt;
                &lt;input id=&quot;idc&quot; type=&quot;file&quot; /&gt;
            &lt;/fieldset&gt;
            &lt;fieldset&gt;
                &lt;legend&gt;其他信息&lt;/legend&gt;
                &lt;p&gt;性别：
                    &lt;label for=&quot;nan&quot;&gt;男&lt;/label&gt;
                    &lt;input id=&quot;nan&quot; type=&quot;radio&quot; name=&quot;rad&quot; /&gt;
                    &lt;label for=&quot;nv&quot;&gt;女&lt;/label&gt;
                    &lt;input id=&quot;nv&quot; type=&quot;radio&quot;  name=&quot;rad&quot; /&gt;
                &lt;/p&gt;
                &lt;p&gt;兴趣：
                    &lt;label for=&quot;chang&quot;&gt;唱歌&lt;/label&gt;
                    &lt;input id=&quot;chang&quot; type=&quot;checkbox&quot; name=&quot;chb&quot; /&gt;
                    &lt;label for=&quot;tiao&quot;&gt;跳舞&lt;/label&gt;
                    &lt;input id=&quot;tiao&quot; type=&quot;checkbox&quot; name=&quot;chb&quot; /&gt;
                    &lt;label for=&quot;dong&quot;&gt;运动&lt;/label&gt;
                    &lt;input id=&quot;dong&quot; type=&quot;checkbox&quot; name=&quot;chb&quot; /&gt;
                &lt;/p&gt;
                &lt;p&gt;
                    &lt;label for=&quot;gq&quot;&gt;个性签名：&lt;/label&gt;&lt;br /&gt;
                    &lt;textarea id=&quot;gq&quot; cols=&quot;40&quot; rows=&quot;5&quot;&gt;&lt;/textarea&gt;
                &lt;/p&gt;
            &lt;/fieldset&gt;&lt;br /&gt;
            &lt;input type=&quot;submit&quot; /&gt;
            &lt;input type=&quot;reset&quot; /&gt;
        &lt;/form&gt;
</code></pre>

            <p>★显示效果<br>
                <img alt="" src="imgs/20250514175343378.png">
            </p>
        </div>
    </section>

    <!-- 通用页脚 -->
    <footer class="main-footer">
        <!-- 页脚链接列表 -->
        <div class="footer-lists">
            <div class="footer-list">
                <dl>
                    <dt><a href="../product_show_page/index.html">作品展示</a></dt>
                    <dd><a href="../product_show_page/wpg_show.html">Windows进程守护工具</a></dd>
                    <dd><a href="../product_show_page/tomato_cube_show.html">《番茄魔方》时间管理工具</a></dd>
                    <dd><a href="../product_show_page/personal_blog_show.html">个人博客网站</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../notes_extract_page/index.html">笔记摘选</a></dt>
                    <dd><a href="../notes_extract_page/html_note_page.html">HTML篇</a></dd>
                    <dd><a href="../notes_extract_page/css_note_page.html">CSS篇</a></dd>
                    <dd><a href="../notes_extract_page/js_note_page.html">JavaScript篇</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../info_links_page/index.html">资料链接</a></dt>
                    <dd><a href="../info_links_page/c_and_cpp_info_page.html">C/C++</a></dd>
                    <dd><a href="../info_links_page/python_info_page.html">Python</a></dd>
                    <dd><a href="../info_links_page/web_info_page.html">Web</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../js_lab_page/index.html">JS实验室</a></dt>
                    <dd><a href="../js_lab_page/sort_demo_page.html">排序演示</a></dd>
                    <dd><a href="../js_lab_page/shape_draw_page.html">图形绘制</a></dd>
                    <dd><a href="../js_lab_page/address_list_page.html">通讯录演示</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../CV_show_page/index.html">简历查看</a></dt>
                    <dd><a href="../CV_show_page/online_view_page.html">在线查看</a></dd>
                    <dd><a href="../CV_show_page/index.html">简历下载</a></dd>
                    <dd><a href="../CV_show_page/index.html">联系方式</a></dd>
                </dl>
            </div>
        </div>
        <!-- 分割线 -->
        <div class="footer-separation"></div>
        <!-- 其他信息 -->
        <div class="other-info">
            <p style="margin-top: 0;">我的邮箱：h2892197119@foxmail.com</p>
            <span>友情链接：</span>
            <a href="https://blog.morely.top" class="friend-link" target="_blank"><img src="../../res/logo_main.png"
                    width="15px" style="margin:0px 5px 0px 5px;">陌离的个人博客</a>
            <p>本网站仅用于学习展示，部分素材取自网络；<br />如有侵权请联系本人进行删除。</p>
        </div>
    </footer>
    <!-- 版权信息 -->
    <div class="copyright-info">
        Copyright &copy;2025 个人学习成果展示网站
    </div>

    <script type="text/javascript" src="../login_register_window.js"></script>
    <script type="text/javascript" src="../public.js"></script>
</body>

</html>